<template>
  <div>
    <v-card tile>
      <v-card-text>
        <v-form>
          <v-text-field
            label="标题"
            v-model="newItem.title"
          ></v-text-field>
          <v-text-field
            label="摘要"
            v-model="newItem.summary"
            multi-line
          ></v-text-field>
          <template v-for="p in newItem.problems">
            <v-radio-group v-if="p.type === 1" :label="p.title">
              <v-radio v-for="v in p.options" :key="v" :label="v" :value="v"></v-radio>
            </v-radio-group>
            <v-checkbox v-if="p.type === 2" v-for="v in p.options" :label="v" :value="v" :key="v"></v-checkbox>
            <div v-if="p.type === 6">
              <input :label="p.title" type="file" ref="assets" name="assets" multiple />
            </div>
            <v-select v-if="p.type === 5" :items="items" :label="p.title" single-line></v-select>
            <v-text-field v-if="p.type === 3" :label="p.title"></v-text-field>
            <v-text-field v-if="p.type === 4" multi-line :label="p.title"></v-text-field>
            <div v-if="p.type === 7">
              <div>{{p.title}}</div>
              <table class="my-table">
                <tr>
                  <td v-for="header in p.options.slice(2, 2 + p.options[1])">{{header}}</td>
                </tr>
                <tr v-for="row in p.options[0]" :key="row">
                  <td v-for="col in p.options[1]" :key="col"></td>
                </tr>
              </table>
            </div>
          </template>
        </v-form>
        <div>
          <v-btn @click="handleAdd(1)">单选</v-btn>
          <v-btn @click="handleAdd(2)">多选</v-btn>
          <v-btn @click="handleAdd(6)">文件</v-btn>
          <v-btn @click="handleAdd(5)">下拉菜单</v-btn>
          <v-btn @click="handleAdd(3)">单行文本</v-btn>
          <v-btn @click="handleAdd(4)">多行文本</v-btn>
          <v-btn @click="handleAdd(7)">表格</v-btn>
        </div>
        <v-btn class="primary mt-4" large :to="{ name: 'registry-index' }">确认发布</v-btn>
      </v-card-text>
    </v-card>
    <v-dialog v-model="dialog" max-width="500">
      <v-card>
        <v-card-title>
          <span class="title">参数设置</span>
        </v-card-title>
        <v-divider></v-divider>
        <v-card-text>
          <v-text-field v-model="titleText" label="题目标题" hint="必填项" required></v-text-field>
          <v-text-field v-model="headers" label="表格头"></v-text-field>
          <v-text-field v-model="rows" label="表格记录行数" type="number"></v-text-field>
        </v-card-text>
        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn @click="dialog = false" flat>{{$t('cancel')}}</v-btn>
          <v-btn @click="addProblems" color="primary">{{$t('sure')}}</v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
  </div>
</template>

<script>
export default {
  data: () => ({
    newItem: {
      title: '',
      summary: '',
      problems: []
    },
    dialog: false,
    titleText: '',
    type: 3,
    headers: '',
    rows: 1
  }),
  computed: {
    ths() {
      return this.headers.split('|')
    }
  },
  methods: {
    handleAdd(type) {
      this.titleText = ''
      this.headers = ''
      this.rows = 1
      this.dialog = true
      this.type = type
    },
    addProblems() {
      this.dialog = false
      if (!this.titleText) this.$notify.warning('请至少填写一个标题')
      else {
        switch (this.type) {
          case 1: this.handleAddRadio(); break
          case 2: this.handleAddCheckBox(); break
          case 3: this.handleAddText(); break
          case 4: this.handleAddTextarea(); break
          case 5: this.handleAddSelect(); break
          case 6: this.handleAddFile(); break
          case 7: this.handleAddTable(); break
          default: this.$notify.warning('添加失败')
        }
      }
    },
    handleAddRadio() {
      console.log(this.titleText)
      this.newItem.problems.push({
        title: this.titleText,
        options: ['选项1', '选项2', '选项3'],
        type: 1
      })
    },
    handleAddCheckBox() {
      this.newItem.problems.push({
        title: this.titleText,
        options: ['选项1', '选项2', '选项3'],
        type: 2
      })
    },
    handleAddFile() {
      this.newItem.problems.push({
        title: this.titleText,
        type: 6
      })
    },
    handleAddSelect() {
      this.newItem.problems.push({
        title: this.titleText,
        options: ['选项1', '选项2', '选项3'],
        type: 5
      })
    },
    handleAddText() {
      this.newItem.problems.push({
        title: this.titleText,
        type: 3
      })
    },
    handleAddTextarea() {
      this.newItem.problems.push({
        title: this.titleText,
        type: 4
      })
    },
    handleAddTable() {
      this.newItem.problems.push({
        title: this.titleText,
        type: 7,
        options: [
          this.rows * 1, this.ths.length,
          ...this.ths
        ]
      })
      console.log(this.newItem.problems)
    }
  }
}
</script>

<style scoped>
.my-table td {
  height: 30px;
  width: 80px;
  border: 1px solid #aaa;
}
</style>
